<!DOCTYPE html>
<html>

  <head>
    <script src="../dist/hammer.js"></script>
    <script src="../dist/svg-pan-zoom.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
  </head>

  <body style="width: 100%; height: 100%">
    <h1>Demo for svg-pan-zoom: Resize SVG container on page resize</h1>
    <div id="container" style="width: 95%; height: 80%; border:1px solid black; ">
      <svg id="demo-tiger" xmlns="http://www.w3.org/2000/svg" style="display: inline; width: 100%; height: 80%; " version="1.1">
        <g id="g444" fill="none">
          <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
        </g>
      </svg>
    </div>

    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {
        var panZoom = window.panZoom = svgPanZoom('#demo-tiger', {
          zoomEnabled: true,
          controlIconsEnabled: true,
          fit: 1,
          center: 1
        });

        $(window).resize(function(){
          panZoom.resize();
          panZoom.fit();
          panZoom.center();
        })
      };
    </script>

  </body>

</html>
